import { Form, Input, Modal } from "antd";
import { useState } from "react";

type NewInstanceModalProps = {
  visible: boolean;
  onVisibleChange: (v: boolean) => void;
};

export default function NewInstanceModal(props: NewInstanceModalProps) {
  const { visible, onVisibleChange } = props;

  const [data, setData] = useState({ name: "", desc: "" });

  function handleConfirm() {
    console.log({ data });
  }

  return (
    <Modal
      open={visible}
      title="创建知识库"
      onClose={() => console.log("close")}
      onCancel={() => onVisibleChange(false)}
      onOk={handleConfirm}
    >
      <Form>
        <Form.Item label="知识库名称">
          <Input
            placeholder="请输入知识库名称"
            value={data.name}
            onInput={(e) =>
              setData({ ...data, name: (e.target as HTMLInputElement).value })
            }
          />
        </Form.Item>
        <Form.Item label="知识库介绍">
          <Input.TextArea
            autoSize={{ minRows: 4, maxRows: 6 }}
            value={data.desc}
            onInput={(e) =>
              setData({
                ...data,
                desc: (e.target as HTMLTextAreaElement).value,
              })
            }
          />
        </Form.Item>
      </Form>
    </Modal>
  );
}
